<template>
	<view class="container">
		<uni-notice-bar text="提示：添加时请将网关重新通电，使其指示灯处于红蓝交替闪烁的待连接状态。" />
		<view class="list" v-if="gateway.length > 0">
			<block v-for="item in gateway" :key="item.MAC">
				<view class="box" hover-class="hoverClass" v-if="item.isSettingMode" @click="handleSet(item)">
					<view class="info">
						<view class="icon">
							<uni-icons custom-prefix="iconfont" type="icon-gateway" size="20" color="#3a3a3a"></uni-icons>
						</view>
						<view class="name">
							{{ item.deviceName }}
						</view>
					</view>
					<uni-icons type="plus" size="20" color="#2979ff"></uni-icons>
				</view>
				<view class="box unclick" v-else @click="unclick">
					<view class="info">
						<view class="icon">
							<uni-icons custom-prefix="iconfont" type="icon-gateway" size="20" color="#909399"></uni-icons>
						</view>
						<view class="name">
							{{ item.deviceName }}
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="empty" v-else>
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord" @click="handleSet">暂无设备</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
const plugin = requirePlugin('ttLock');
export default {
	data() {
		return {
			gateway: []
		};
	},
	onLoad() {
		this.startScan();
	},
	onHide() {
		this.handleStopAllOperations();
	},
	onUnload() {
		this.handleStopAllOperations();
	},
	methods: {
		handleSet(item) {
			uni.navigateTo({
				url:'/pageA/gateway/set?item=' +JSON.stringify(item)
			})
		},
		unclick() {
			uni.showToast({
				icon: 'none',
				title: '网关不可添加'
			});
		},
		// 搜索网关
		startScan() {
			uni.showNavigationBarLoading();
			this.gateway = [];
			plugin.startScanGateway(
				(plugDevice, gateway) => {
					this.gateway = gateway;
				},
				(err) => {
					this.handleStopAllOperations();
					uni.showToast({
						icon: 'none',
						title: err.errorMsg
					});
				}
			);
		},
		// 停止所有蓝牙操作
		handleStopAllOperations() {
			plugin.stopAllOperations();
			uni.hideNavigationBarLoading();
		}
	}
};
</script>

<style lang="scss">
.container {
	.list {
		padding: 20rpx;
		.box {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;
			.info {
				display: flex;
				align-items: center;
				.icon {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
					border: 1rpx solid $uni-border-4;
					margin-right: 20rpx;
				}
				.name {
					font-size: 28rpx;
					font-weight: bold;
				}
			}
			&.unclick {
				background-color: #f1f1f1;
				color: $uni-secondary-color;
			}
		}
	}
}
</style>
